<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p><button @click="randGrade">随机成绩</button></p>

        <div v-if="grade>=0">
            <p>你的成绩是: {{grade}}</p>
            <p>是否及格: 
                <span v-if="grade>=60">及格</span>
                <span v-else>不及格</span>
            </p>
            <p>成绩等级: 
                <span v-if="grade>=90">A</span>
                <span v-else-if="grade>=80">B</span>
                <span v-else-if="grade>=70">C</span>
                <span v-else-if="grade>=60">D</span>
                <span v-else>E</span>
            </p>
        </div>

        <!-- v-if 条件渲染分组 -->
        <div>
            <!-- 错误写法 -->
            <!-- 登陆了 -->
            <!-- <span v-if="isLogin">欢迎,老铁</span>
            <span v-if="isLogin">退出登录</span> -->

            <!-- 没有登录 -->
            <!-- <a v-else href="">你好,请登录</a>
            <a v-else href="">免费注册</a> -->


            <!-- 解决方法1  => 通过给分组的元素包裹父元素  统一以父元素判断 (缺点: html结构中比预期多了一个div)-->
            <!-- <div v-if="isLogin">
                <span >欢迎,老铁</span>
                <span >退出登录</span>
            </div>
            <div>
                <a  href="">你好,请登录</a>
                <a  href="">免费注册</a>
            </div> -->

             <!-- 解决方法2 => 用法同1 但是template标签,在被Vue解析成真实dom的过程中将会删除 标签内的元素将放到其父元素中-->
            <template v-if="isLogin">
                <span >欢迎,老铁</span>
                <span >退出登录</span>
            </template>
            <template>
                <a  href="">你好,请登录</a>
                <a  href="">免费注册</a>
            </template>



        </div>


    </div>
</body>
<script>
    // 条件渲染
    // v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
    // v-if="指令值"  指令值结果为true => 渲染 , 为false就不渲染


    // 条件渲染分组
    // 用法:如果想同时渲染多个元素,又不想包裹无意义的标签 -> 可以选择template标签(当做当做不可见的包裹元素),最终的渲染结果将不包含 <template> 元素。

    var vm = new Vue({
        el:"#app",
        data:{
            // grade:-100 + Math.round(Math.random()*200),
            grade:null,  // null >= 0  => true
            isLogin:false,
        },
        methods:{
            randGrade(){    
                // 100-999    100 + (999-100)
                // -100 到 100的成绩   
                var num =  -100 + Math.round(Math.random()*200)
                console.log(num);
                this.grade = num;
            }
        },

        // 钩子函数(回调函数)  mounted  => Vue实例初始化渲染完毕之后执行的函数(有就执行,没有就不执行)
        mounted:function() {
            console.log("初始化渲染完毕");
            this.randGrade();  // Vue根实例渲染完成之后 先调用方法生成成绩
        },
    })






</script>
</html>